// 画布基本设置
export const configSetting = (Shape) => {
  return {
    grid: true,
    autoResize: true,
    translating: { restrict: true },
    mousewheel: {
      enabled: true,
      zoomAtMousePosition: true,
      modifiers: 'ctrl',
      minScale: 0.5,
      maxScale: 3,
    },
    connecting: {
      router: {
        name: 'manhattan',
        args: {
          padding: 1,
        },
      },
      connector: {
        name: 'rounded',
        args: {
          radius: 8,
        },
      },
      anchor: 'center',
      connectionPoint: 'anchor',
      allowBlank: false,
      snap: {
        radius: 20,
      },
      createEdge() {
        return new Shape.Edge({
          attrs: {
            line: {
              stroke: '#A2B1C3',
              strokeWidth: 2,
              strokeDasharray: 5,
              style: {
                animation: 'ant-line 30s infinite linear',
              },
              targetMarker: {
                name: 'block',
                width: 12,
                height: 8
              },
            },
          },
          zIndex: 0,
        })
      },
      validateConnection({ targetMagnet }) {
        return !!targetMagnet
      },
    },
    onToolItemCreated({ tool }) {
      const handle = tool
      const options = handle.options
      if (options && options.index % 2 === 1) {
        tool.setAttrs({ fill: 'red' })
      }
    },
    highlighting: {
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#369BA5',
            stroke: '#369BA5',
          },
        },
      },
    },
    resizing: false,  // 是否允许调整组件大小
    rotating: true,
    selecting: {
      enabled: true,
      rubberband: true,
      showNodeSelectionBox: true,
    },
    snapline: true,
    keyboard: true,
    clipboard: true,
    history: true,
  }
}

/**
* 节点预设类型
* 0椭圆形: defaultOval,
* 1方形: defaultSquare,
* 2圆角矩形: defaultYSquare,
* 3菱形: defaultRhombus,
* 4平行四边形: defaultRhomboid,
* 5圆形: defaultCircle,
* 6图片: otherImage
* 到时候通过传入的type===通过匹配 data里面设置的type获取到相应的节点设置内容
* 编辑的时候也可以通过节点里面的 data.type 获取到到底是什么节点进行响应设设置
* param为自定义的配置参数
*/
export const configNodeShape = (type, param) => {
  const nodeShapeList =  [{
      label: '椭圆形',
      /**
       *
       *  加入data里面的标识type是为了方便编辑的时候找到相对应的类型进行不同的编辑处理
       *  另外获取初始对应的设置
      */
      data: {
        type: 'defaultOval'
      },
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        body: {
          rx: 20,
          ry: 26,
          fill: '#fff',
          stroke: '#333'
        },
        label: {
          text: '椭圆形',
          fontSize: 16,
          fill: '#333'
        }
      }
    },
    {
      label: '方形',
      data: {
        type: 'defaultSquare',
      },
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        label: {
          text: '方形',
          fontSize: 16,
          fill: '#333'
        },
        body: {
          fill: '#fff',
          stroke: '#333'
        }
      },
    },
    {
      label: '圆角矩形',
      data: {
        type: 'defaultYSquare'
      },
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        body: {
          rx: 6,
          ry: 6,
          fill: '#fff',
          stroke: '#333'
        },
        label: {
          text: '圆角矩形',
          fontSize: 16,
          fill: '#333'
        }
      },
    },
    {
      label: '菱形',
      data: {
        type: 'defaultRhombus'
      },
      shape: 'polygon',
      width: 120,
      height: 50,
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20',
          fill: '#fff',
          stroke: '#333'
        },
        label: {
          text: '菱形',
          fontSize: 16,
          fill: '#333'
        }
      },
    },
    {
      label: '平行四边形',
      data: {
        type: 'defaultRhomboid'
      },
      shape: 'polygon',
      width: 120,
      height: 50,
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20',
          fill: '#fff',
          stroke: '#333'
        },
        label: {
          text: '平行四边形',
          fontSize: 16,
          fill: '#333'
        }
      }
    },
    {
      label: '圆形',
      data: {
        type: 'defaultCircle'
      },
      shape: 'circle',
      width: 80,
      height: 80,
      attrs: {
        label: {
          text: '圆形',
          fontSize: 16,
          fill: '#333'
        },
        body: {
          fill: '#fff',
          stroke: '#333'
        }
      }
    },
    {
      label: "图片",
      data: {
        type: 'otherImage'
      },
      shape: 'rect',
      width: 100,
      height: 100,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          rx: 10,
          ry: 10,
          stroke: '#369BA5',
          fill: '#FFFFFF',
        },
        image: {
          width: 90,
          height: 90,
          refX: 5,
          refY: 5,
          //xlinkHref: 'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
          xlinkHref: param.xlinkHref,
        },
        label: {
          refX: 50,
          refY: 120,
          fontSize: 14,
          fill: '#1E1E1E',
          //text: '图片',
          tag: param.tag,
          text: param.label,
        },
      },
    }
  ]
  if(type) {
    const obj = nodeShapeList.find(item => {return item.data.type === type})
    return obj || nodeShapeList
  }
  return nodeShapeList
}

/**
* 节点连接桩设置
* 这里设置了上下左右四个
* 并且给style设置了 visibility: 'hidden'，默认是隐藏的。
* 如果设置了隐藏记得在画布里面设置鼠标经过显示。
* graph.on('node:mouseenter', () => {
        const container = document.getElementById('wrapper')
        const ports = container.querySelectorAll('.x6-port-body')
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
          ports[i].style.visibility = val ? 'visible' : 'hidden'
        }
    })
* 如果需要常显去掉每个链接桩里面的
  style: {
        visibility: 'hidden',
     },
* 就可以了
*/
export const configNodePorts = () => {
  return {
    groups: {
      top: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#369BA5',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      right: {
        position: 'right',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#369BA5',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      bottom: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#369BA5',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
      left: {
        position: 'left',
        attrs: {
          circle: {
            r: 4,
            magnet: true,
            stroke: '#369BA5',
            strokeWidth: 1,
            fill: '#fff',
            style: {
              visibility: 'hidden',
            },
          },
        },
      },
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ]
  }
}

// 连线 label 设置
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
  if(!labelText) return { attrs: { labelText: { text: '' }, labelBody: { fill: '', stroke: '' } } }
  return {
      markup: [
        {
          tagName: 'rect',
          selector: 'labelBody',
        },
        {
          tagName: 'text',
          selector: 'labelText',
        },
      ],
      attrs: {
        labelText: {
          text: labelText || '',
          fill: fontColor || '#333',
          textAnchor: 'middle',
          textVerticalAnchor: 'middle',
        },
        labelBody: {
          ref: 'labelText',
          refX: -8,
          refY: -5,
          refWidth: '100%',
          refHeight: '100%',
          refWidth2: 16,
          refHeight2: 10,
          stroke: stroke || '#555',
          fill: fill || '#fff',
          strokeWidth: 2,
          rx: 5,
          ry: 5,
        },
      }
    }
}

// 键盘事件
export const graphBindKey = (graph) => {
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    })
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.cut(cells)
      }
      return false
    })
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 })
        graph.cleanSelection()
        graph.select(cells)
      }
      return false
    })
    //undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.history.canUndo()) {
        graph.history.undo()
      }
      return false
    })
    graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
      if (graph.history.canRedo()) {
        graph.history.redo()
      }
      return false
    })
    // select all
    graph.bindKey(['meta+a', 'ctrl+a'], () => {
      const nodes = graph.getNodes()
      if (nodes) {
        graph.select(nodes)
      }
    })
    //delete
    /*
    graph.bindKey('delete', () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.removeCells(cells)
      }
    })
    */
    // zoom
    graph.bindKey(['ctrl+1', 'meta+1'], () => {
      const zoom = graph.zoom()
      if (zoom < 1.5) {
        graph.zoom(0.1)
      }
    })
    graph.bindKey(['ctrl+2', 'meta+2'], () => {
      const zoom = graph.zoom()
      if (zoom > 0.5) {
        graph.zoom(-0.1)
      }
    })
    return graph
}

// 组件库配置
export const assembly = [
  // 系统工具
  {
    groupName: "系统工具",
    groupEnName: "System tools",
    node: [
        {
          title: "贝叶斯优化",
          title_En: "Bayesian optimization",
          imgSrc: "/assembly/bayesian_optimization.png",
        },
        // {
        //   title: "复合机器人",
        //   imgSrc: "/assembly/composite_robot.png",
        // },
    ],
  },
  // 自动化物料集散系统
  {
    groupName: "自动化物料集散系统",
    groupEnName: "Auto material distribution system",
    node: [
        {
          title: "反应釜开盖机",
          title_En: "Reaction Capping",
          imgSrc: "/assembly/capping_machine.png",
        },
        {
          title: "试管开盖机",
          title_En: "TestTube Capping",
          imgSrc: "/assembly/capping_machine.png",
        },
        {
          title: "物料定位台",
          title_En: "Material Position",
          imgSrc: "/assembly/material_positioning_table.png",
        },
        {
          title: "超声波清洗机",
          title_En: "Ultrasonic",
          imgSrc: "/assembly/ultrasonic_cleaning_machine.png",
        },
        {
          title: "精密天平",
          title_En: "Balance",
          imgSrc: "/assembly/precision_balance.png",
        },
    ],
  },
  // 自动化配料交互系统
  {
    groupName: "自动化配料交互系统",
    groupEnName: "Auto ingredient interaction system",
    node: [
        {
          title: "高通量配粉系统",
          title_En: "Hhroughput",
          imgSrc: "/assembly/high_throughput_powder_dispensing_system.png",
        },
        {
          title: "移液配比系统",
          title_En: "Pipette",
          imgSrc: "/assembly/pipette_proportioning_system.png",
        },
    ],
  },
  // 自动化球磨与破碎交互系统
  {
    groupName: "自动化球磨与破碎交互系统",
    groupEnName: "Auto ball milling and crushing system",
    node: [
        {
          title: "球磨机1",
          title_En: "Ball milling1",
          imgSrc: "/assembly/ball_mill.png",
        },
        {
          title: "球磨机2",
          title_En: "Ball milling2",
          imgSrc: "/assembly/ball_mill.png",
        },
        {
          title: "颚式破碎机",
          title_En: "Crushing",
          imgSrc: "/assembly/jaw_crusher.png",
        },
        {
          title: "刷料机",
          title_En: "Brushing",
          imgSrc: "/assembly/ball_mill_scraper.png",
        },
        {
          title: "坩埚转换位",
          title_En: "Crucible",
          imgSrc: "/assembly/ball_mill_scraper.png",
        },
        // {
        //   title: "球磨研磨球过滤机",
        //   imgSrc: "/assembly/ball_mill_grinding_ball_filter.png",
        // },
    ],
  },
  // 自动化成型与压装交互系统
  {
    groupName: "自动化成型与压装交互系统",
    groupEnName: "Auto Forming and Pressing System",
    node: [
        {
          title: "自动化电池封装机",
          title_En: "Battery Packaging",
          imgSrc: "/assembly/automated_battery_packaging_machine.jpg",
        },
        {
          title: "陶瓷压片机",
          title_En: "Tablet Press",
          imgSrc: "/assembly/ceramic_tablet_press.jpg",
        },
    ],
  },
  // 自动化高温烧结交互系统
  {
    groupName: "自动化高温烧结交互系统",
    groupEnName: "Auto high-temperature sintering system",
    node: [
        {
          title: "管式炉",
          title_En: "Tube Furnace",
          imgSrc: "/assembly/tube_furnace.png",
        },
        {
          title: "下装炉",
          title_En: "LowerGarment Furnace",
          imgSrc: "/assembly/bottom_charging_furnace.png",
        },
    ],
  },
  // 自动化电化学测试交互系统
  {
    groupName: "自动化电化学测试交互系统",
    groupEnName: "Auto Electrochemical Testing System",
    node: [
        {
          title: "固固测试平台",
          title_En: "SolidSolid Test",
          imgSrc: "/assembly/solid_solid_testing_platform.png",
        },
        {
          title: "固液测试平台",
          title_En: "SolidLiquid Test",
          imgSrc: "/assembly/solid_liquid_testing_platform.png",
        },
        {
          title: "电化学测试仪器",
          title_En: "Electrochemical Test",
          imgSrc: "/assembly/electrochemical_testing_instruments.png",
        },
    ],
  },
  // 自动化XRD测试交互系统
  {
    groupName: "自动化XRD测试交互系统",
    groupEnName: "Auto XRD testing system",
    node: [
        {
          title: "XRD测试仪",
          title_En: "XRD Test",
          imgSrc: "/assembly/XRD_tester.png",
        },
    ],
  },
  // 自动化干燥系统
  {
    groupName: "自动化干燥系统",
    groupEnName: "Auto drying system",
    node: [
        {
          title: "自动化烘干机",
          title_En: "Dryer",
          imgSrc: "/assembly/automatic_dryer.png",
        },
    ],
  },
];
